<template>
    <div>
      <nav-com title="独立负责人申请进度" :showView="showView" @back="backHandler()"></nav-com>
      <div style="margin:20px">
        <div style="line-height: 50px;font-size: 16px;">审批进度:</div>
        <div style="display: flex;padding: 20px;background-color: #fff;border-radius: 10px;align-items: center;    flex-direction: column;">
                <div style="display: flex;padding: 20px;background-color: #fff;border-radius: 10px;align-items: center;    width: 100%; justify-content: space-around;">
                
                    <div style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                position: absolute;">
                        <div class="progress_success"></div>
                        <div class="connect" ></div>
                        <div :class="dataList.status==0?'progress_wait':'progress_success'" ></div>
                        <div class="connect" :style="dataList.status==0?'background:#e7eefc':''"></div>
                        <div v-if="dataList.status==1" class="progress_success"></div>
                        <div v-if="dataList.status==0" class="progress_no"></div>
                        <div v-if="dataList.status==2" class="progress_error"></div>
                    </div>
                </div>
                <div style="display: flex;margin-top: 10px;
                            width: 100%;line-height: 40px;
                            justify-content: space-between;
                            color: rgb(128, 128, 128);">
                    <div style="flex: 1;text-align: center;">我发起申请</div>
                    <div ></div>
                    <div v-if="dataList.status!=0" style="flex: 1;text-align: center;">待审核</div>
                    <div v-if="dataList.status==0" style="color: #FE4B20;flex: 1;text-align: center;">待审核</div>

                    <div v-if="dataList.status==0" style="flex: 1;text-align: center;">审核结果</div>

                    <div v-if="dataList.status==1" style="color: #2ED573;flex: 1;text-align: center;">审核成功</div>
                    <div v-if="dataList.status==2" style="color: #FE4B20;flex: 1;text-align: center;">审核失败</div>
                </div>
        </div>
        <div v-if="dataList.status==0">
            <div style="display: flex;color: #000000;line-height: 30px;margin-top: 20px;font-size: 15px;">审核规则</div>
            <div style="display: flex;color: #000000;line-height: 30px;font-size: 15px;">
                <div>1、</div>
                <div>您发送申请后，平台将会在3个工作日内进行审核，稍后你可关注审核结果。</div>
            </div>
        </div>
        <div v-if="dataList.status==2" style="margin: 10px;">
            <div style="display: flex;color: #000000;line-height: 30px;margin-top: 20px;font-size: 15px;">申请失败原因：</div>
            <div style="display: flex;color: #000000;line-height: 30px;font-size: 15px;">
                <div>{{dataList.fail_resson}}</div>
            </div>
        </div>
      </div>
      
    </div>
  </template>
    
  <script>
  import {
    getSellProfit,
    getSellProfitList,
    getProfitStatistics,
    ListIncome,
    extIncome,
    dependentApplyStatus
  } from "@/api/api";
  import navCom from "@/component/nav";
  import Loading from "@/component/loading";
  import {
    RadioGroup,
    Radio,
    Field,
    CellGroup,
    Picker,
    Icon,
    Toast,
    Pagination,
    Calendar,
    Step, Steps
  } from "vant";
  export default {
    components: {
      navCom,
      Loading,
    },
    data() {
      return {
        active:2,
        tabList: ["待审批独立负责人", "已审批独立负责人",],
        showView: true,
        isLoading: false,
        allInfo: {},
        dataList: {},
        dataInfo: {},
      };
    },
    filters: {
     
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        dependentApplyStatus()
          .then((result) => {
            console.log("dependentApplyStatus", result);
            if (result.data.code == 1) {
              this.dataList = result.data.data;
            } else {
              Toast(result.data.msg);
            }
          })
          .catch((err) => { });
      },
      submit(id) {
        extIncome({ id: id })
          .then((result) => {
            console.log("extIncome", result);
            Toast(result.data.msg);
            if (result.data.code == 1) {
              this.initData();
            } else {
              Toast(result.data.msg);
            }
          })
          .catch((err) => { });
      },
      //返回
      backHandler() {
        if (weixin.isAndroid()) {
          window.JS_TROOPS.goBack();
        } else {
          this.$router.go(-1);
        }
      },
    },
  };
  </script>
  <style>
    body{
      background-color: #f2f3f7;
    }
  </style>
  <style scoped>
  /deep/.back_box{
    border-bottom: 1px solid #EEEEEE;
  }
  .progress_error{
    background-image: url('../../../assets/my/progress_error.png');
    width: 30px;
    height: 30px;
    background-repeat: round;
    z-index: 100;
  }
  .progress_success{
    background-image: url('../../../assets/my/progress_success.png');
    width: 30px;
    height: 30px;
    background-repeat: round;
    position: relative;
    z-index: 100;
  }
  .progress_no{
    background-image: url('../../../assets/my/progress_no.png');
    width: 30px;
    height: 30px;
    background-repeat: round;
    position: relative;
    z-index: 100;
  }
  .progress_wait{
    background-image: url('../../../assets/my/progress_wait.png');

    background-repeat: round;
    position: relative;
    z-index: 100;
    width: 35px;
    height: 35px;
  }
  .connect{
    height: 5px;
    background: #FE4B20;
    width: 18vw;
    opacity: 0.6;
  }
  </style>